<template>
	<view class="container">
		<u-navbar title="工具商城" :border-bottom="false" :background="{backgroundColor:'transparent'}" title-color="#fff"
			back-icon-color="#fff"></u-navbar>
		<view class="container_image">
			<u-image :src="url + '/static/bgImg.png'" width="100vw" mode="widthFix"></u-image>
		</view>
		<view class="container_main">
			<!-- <view class="container_main_item u-flex u-row-between" @click="handleToBuy('jobstick')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/topping.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							想要精准推广怎么办？
						</view>
						<text>职位置顶</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					置顶职位
				</view>
			</view> -->
			<view class="container_main_item u-flex u-row-between" @click="handleToBuy('emergency')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/emergent.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							想要快人一步，脱颖而出？
						</view>
						<text>紧急招聘</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					紧急招聘
				</view>
			</view>
			<view class="container_main_item u-flex u-row-between" @click="handleToBuy('resume_package')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/resume.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							简历下载点数不足怎么办？
						</view>
						<text>简历增值包</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					购买简历包
				</view>
			</view>
			<view class="container_main_item u-flex u-row-between" @click="handleToBuy('job_refresh')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/refresh.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							职位曝光少怎么办？
						</view>
						<text>智能刷新</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					刷新职位
				</view>
			</view>
			<view class="container_main_item u-flex u-row-between" @click="handleToBuy('im')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/chat.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							摆脱聊天人数限制？
						</view>
						<text>职聊增值包</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					购买职聊包
				</view>
			</view>
			<view class="container_main_item u-flex u-row-between" @click="handleToBuy('package')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/package.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							升级套餐，尽享更多权益？
						</view>
						<text>套餐升级</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					套餐升级
				</view>
			</view>
			<view class="container_main_item u-flex u-row-between" @click="handleToBuy('integral')">
				<view class="u-flex">
					<u-image src="/pages/pagesPersonal/static/toolMall/integral.png" :width="82" :height="98"
						mode="widthFix"></u-image>
					<view class="u-m-l-10">
						<view>
							小积分大用处？
						</view>
						<text>积分订单</text>
					</view>
				</view>
				<view class="container_main_item_btn">
					购买积分
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		nextTick,
		reactive
	} from "vue";
	import development from '/config/development'
	import production from '/config/productions'
	console.log(development);
	const url = process.env.NODE_ENV === 'development' ? development.url : production.url;
	// 跳转购买页面
	const handleToBuy = (type) => {
		if (type == 'package') return uni.$u.route('/pages/pagesPersonal/toolMall/package')
		if (type == 'integral') return uni.$u.route('/pages/pagesPersonal/toolMall/buyIntegral')
		uni.$u.route('/pages/pagesPersonal/toolMall/detail', {
			type
		})
	}
</script>

<style>
	page {
		background-color: #F0EFEF;
	}
</style>
<style lang="scss" scoped>
	.container {
		position: relative;

		&_image {
			position: absolute;
			top: 0;
			background-color: #00B499;
			padding-top: var(--status-bar-height);
		}

		&_main {
			padding: 0 32rpx;
			font-size: 26rpx;
			padding-bottom: 24rpx;
			position: relative;
			z-index: 999;
			padding-top: 230rpx;

			&_item {
				color: #101010;
				background-color: #fff;
				padding: 20rpx 20rpx 20rpx 30rpx;
				margin-bottom: 24rpx;

				text {
					color: #bbbbbb;
				}

				&_btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 58rpx;
					font-size: 28rpx;
					text-align: center;
					font-family: Arial;
					border: 2rpx solid #00D075;
					color: #00D075;
				}
			}
		}
	}
</style>